<!-- 详情订单列表的页面 -->
<template>
    <div class="app-container" :readonly="true" >
        <!-- 查看订单详情 -->
            <el-form label-width="120px">
        
        <el-form-item label="用户">
            <el-input v-model="user.nickname" :disabled="true"/>
        </el-form-item>
        <el-form-item label="手机">
            <el-input v-model="user.mobile" :disabled="true"/>
        </el-form-item>
        <el-form-item label="状态" v-if="user.isDisabled == true">
            <el-input value="禁用" :disabled="true"/>
        </el-form-item>
        <el-form-item label="状态" v-if="user.isDisabled == false">
            <el-input value="启用" :disabled="true"/>
        </el-form-item>
        <el-form-item label="登录方式" v-if="user.openid !== null">
            <el-input value="微信" :disabled="true"/>
        </el-form-item>
        <el-form-item label="登录方式" v-else>
            <el-input value="手机号" :disabled="true"/>
        </el-form-item>
        <!-- <el-form-item label="支付方式" >
            <el-select v-model="order.payType" :readonly="true" clearable placeholder="请选择"> -->
            <!--
                数据类型一定要和取出的json中的一致，否则没法回填
                因此，这里value使用动态绑定的值，保证其数据类型是number
            -->
            <!-- <el-option :value="1" label="微信" :readonly="true"/>
            <el-option :value="2" label="支付宝" :readonly="true"/>
            </el-select> -->
        <!-- </el-form-item> -->
        <el-form-item label="标签">
            <el-input v-model="user.sign" :disabled="true" :readonly="true"/>
        </el-form-item>
        <el-form-item label="年龄">
            <el-input v-model="user.age" :disabled="true" :readonly="true"/>
        </el-form-item>
        <el-form-item label="性别" v-if="Number(user.sex) ===1 ">
            <el-input value="女" :disabled="true" :readonly="true"/>
        </el-form-item>
        <el-form-item label="性别" v-else-if="Number(user.sex) === 2">
            <el-input value="男" :disabled="true" :readonly="true"/>
        </el-form-item>
        <el-form-item label="性别" v-else>
            <el-input value="" :disabled="true" :readonly="true"/>
        </el-form-item>

        <!-- 讲师头像：TODO -->
        <!-- 讲师头像 -->
        <el-form-item label="头像">
                <!-- 头衔缩略图 -->
            <pan-thumb :image="user.avatar"/>
            <!-- 文件上传按钮 -->
            <!-- <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像 -->
            <!-- </el-button> -->
                <!--
            v-show：是否显示上传组件
            :key：类似于id，如果一个页面多个图片上传控件，可以做区分
            :url：后台上传的url地址
            @close：关闭上传组件
            @crop-upload-success：上传成功后的回调 -->
            <!-- <image-cropper
                        v-show="imagecropperShow"
                        :width="300"
                        :height="300"
                        :key="imagecropperKey"
                        :url="BASE_API+'/eduoss/fileoss'"
                        field="file"
                        @close="close"
                        @crop-upload-success="cropSuccess"/>-->
        </el-form-item> 
        
        <el-form-item>
            <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">确定</el-button>
        </el-form-item>
        </el-form>
    </div>
</template>

<script>
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
import user from '@/api/edu/user'
export default {
    // 引入我们的组件
    components:{ImageCropper,PanThumb},
    data(){
        return{
            user:{},
            saveBtnDisabled: false,
            // 上传弹框的组件是否显示
            // imagecropperShow: false,
            // imagecropperKey: 0, // key的唯一标识
            // BASE_API: process.env.VUE_APP_BASE_API,// 获取dev里面的
            isReadOnly:false


        }
    },
    created(){
        
        // 判断路径中是否有id值 做修改操作
        if (this.$route.params && this.$route.params.id) {
            const id = this.$route.params.id
            // 查询数据
            // 如果有id的话 就是编辑的按钮
            this.getInfor(id)
        }

    },
    // // 监听
    // watch:{
    //     $route(to,from){ // 路由变化方式  方法就会执行
    //         this.init()
    //     }
    // },
    methods:{
        // // 初始化
        // init(){
        //       // 判断路径中是否有id值 做修改操作
        //     if (this.$route.params && this.$route.params.id) {
        //         const id = this.$route.params.id
        //         // 查询数据
        //         // 如果有id的话 就是编辑的按钮
        //         this.getInfor(id)
        //     } else {
        //         // 路径没有id 就清空表单
        //         this.teacher = {}
        //     }
        // },

        
        

        // 根据讲师id查询信息的方法
        getInfor(id){
            user.getUserById(id).then(resp => {
                 this.user = resp.data.user
            })
        },

        

        // 可修改 可 保存
        saveOrUpdate(){

            // 路由跳转
            this.$router.push({path:'/user/table'})


           
        },
        
    }
}

</script>
